import React, { useEffect, useState } from 'react';
import { Space, Table, Tooltip, Button, Switch, Popconfirm, message, Form, Input } from "antd";
import { FormOutlined, DeleteOutlined, SearchOutlined } from "@ant-design/icons";
import { useAppDispatch } from "@/hooks";
import {
  changeStateById,
  deleteHospitalSetByIdAsync,
  getHospitalSetAsync,
  getHospitalSetLockIdAsync,
  useSelectorHosp,
  deleteBatchMoveAsync, changeParams
} from "@/store/slice/hosp";
import { useSelectorCommon } from "@/store/slice/common";
import HospitalModal from "@/pages/hospital/hospitalSet/components/HospitalModal";

function HospitalSet() {
  const dispatch = useAppDispatch();
  const { hospSetList } = useSelectorHosp();
  const { pageInfo, loading } = useSelectorCommon();
  // 控制modal的显示与隐藏
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  // 控制modal的标题
  const [modalTitle, setModalTitle] = useState<string>("添加医院设置");
  // 指定修改的内容
  const [hospitalSetInfo, setHospitalSetInfo] = useState<any>(null);
  // 选中的id 和删除关联 删除指定id
  const [selectedId, setSelectedId] = useState<number>(-1);
  // 选中要删除的设置  批量删除
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // 批量删除中
  const [delLoading, setDelLoading] = useState(false);
  const [form] = Form.useForm();
  useEffect(() => {
    dispatch(getHospitalSetAsync(1, 5));
    return function () {
      dispatch(changeParams({}));
    }
  }, []);
  return (
    <div>
      <Space style={{ marginBottom: 16 }}>
        <Button type={"primary"} onClick={() => {
          setHospitalSetInfo(null);
          setModalTitle("添加医院设置");
          setIsModalVisible(true);
        }}>添加医院设置</Button>
        <Button type="primary" onClick={async () => {
          setDelLoading(true);
          await dispatch(deleteBatchMoveAsync(selectedRowKeys));
          setSelectedRowKeys([]);
          setDelLoading(false);
          message.success("批量删除成功");
        }} disabled={selectedRowKeys.length === 0}
          loading={delLoading}
        >
          批量删除{selectedRowKeys.length}条
        </Button>




        {/* 搜索功能 表单 */}
        <Form
          // form={form}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={(values: any) => {
            console.log(values);            
            // dispatch(changeParams(values));
            // dispatch(getHospitalSetAsync(1, 5));
          }}
          autoComplete="off"
          layout={"inline"}
        >
          <Form.Item
            name="hosname" // name属性要改成hosname
          >
            <Input placeholder={"请输入医院名称"} />
          </Form.Item>
          <Form.Item
            name="hoscode"
          >
            <Input placeholder={"请输入医院编码"} />
          </Form.Item>
          <Form.Item>
            <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={() => {
              form.resetFields();// 重置表单
              dispatch(changeParams({}));
              dispatch(getHospitalSetAsync(1, 5));
            }} htmlType="button">
              重置
            </Button>
          </Form.Item>
        </Form>

      </Space>




      <Table
        rowSelection={{
          selectedRowKeys,
          onChange(newSelectedRowKeys: React.Key[]) {
            console.log(newSelectedRowKeys) 
            // 所有选中的id  (看文档)  想要实现 onChange必须接收参数newSelectedRowKeys: React.Key[]
            setSelectedRowKeys(newSelectedRowKeys);
          }
        }}
        loading={loading}
        pagination={{
          ...pageInfo,
          onChange(page, pageSize) {
            dispatch(getHospitalSetAsync(page, pageSize));
          }
        }}
        rowKey={"id"}
        /*增加表格边框*/
        bordered={true}
        scroll={{ x: 1800 }}
        columns={[
          {
            title: "序号",
            width: 70,
            align: "center",// 居中
            // dataIndex:"id",
            // 第一个参数：如果没有设置dataIdex,那么值为该行信息
            render(value, rows, index) {
              // console.log(value,rows,index);
              return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
            }
          }, {
            title: "医院名称",
            align: "center",
            width: 200,
            ellipsis: true,// 超过宽度将自动省略
            dataIndex: "hosname"
          }, {
            title: "医院编号",
            align: "center",
            dataIndex: "hoscode"
          }, {
            title: "是否锁定",
            align: "center",
            // 0：锁定 1：未锁定
            dataIndex: "status",
            render(status, rows) {
              return (
                <Switch checked={status === 0} onChange={() => {
                  // dispatch(changeStateById(rows.id))
                  dispatch(getHospitalSetLockIdAsync(rows.id, status));
                }} />
              )
            }
          }, {
            title: "api基础地址",
            align: "center",
            dataIndex: "apiUrl"
          }, {
            title: "密钥",
            align: "center",
            width: 150,
            ellipsis: true,// 超过宽度将自动省略
            dataIndex: "signKey"
          }, {
            title: "联系人姓名",
            align: "center",
            dataIndex: "contactsName"
          }, {
            title: "联系人手机",
            align: "center",
            dataIndex: "contactsPhone"
          }, {
            title: "添加时间",
            align: "center",
            dataIndex: "createTime"
          }, {
            title: "更新时间",
            align: "center",
            dataIndex: "updateTime"
          }, {
            title: "操作",
            align: "center",
            // dataIndex:"hosname",
            fixed: "right",// 右浮动
            render(rows) {
              return (
                <Space>
                  <Tooltip title="编辑">
                    <Button onClick={() => {
                      setModalTitle("修改医院设置");
                      setHospitalSetInfo({ ...rows });
                      setIsModalVisible(true);
                    }} type="primary" shape="circle" icon={<FormOutlined />} />
                  </Tooltip>

                  {
                    //1- onConfirm 指定的不是async函数会自动关闭
                    // 2- 指定方向
                  }
                  {/* 气泡框 Popconfirm */}
                  <Popconfirm
                    placement="topRight"
                    title={"确定要删除" + rows.hosname + "信息吗？"}
                    onConfirm={() => {
                      dispatch(deleteHospitalSetByIdAsync(rows.id)).then(() => {
                        message.success("删除" + rows.hosname + "成功");
                      })
                    }}
                    okText="是"
                    cancelText="否"
                  >
                    <Tooltip title="删除">
                      <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                    </Tooltip>
                  </Popconfirm>

                </Space>
              )
            }
          }
        ]}
        dataSource={hospSetList} />


      <HospitalModal hospitalSetInfo={hospitalSetInfo} modalTitle={modalTitle} setIsModalVisible={setIsModalVisible} isModalVisible={isModalVisible} />
    </div>
  );
}

export default HospitalSet;